<script setup lang="ts">
import LEacharts from '../../components/MyEacharts/LEacharts.vue';
import REacharts from '../../components/MyEacharts/REacharts.vue';
import {
    Histogram, Avatar, HomeFilled, PictureFilled, Menu, Tools
} from '@element-plus/icons-vue'

interface User {
    id: string
    name: string
    type: boolean,
    num: string,
    all: string,
    today: string,
    state: boolean
}

const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}

const tableData: User[] = [
    {
        id: '1',
        name: '限时秒杀',
        type: false,
        num: '999',
        all: '999',
        today: '999',
        state: false
    }, {
        id: '2',
        name: '限时秒杀',
        type: true,
        num: '999',
        all: '999',
        today: '999',
        state: true
    }, {
        id: '3',
        name: '限时秒杀',
        type: false,
        num: '999',
        all: '999',
        today: '999',
        state: false
    }, {
        id: '5',
        name: '限时秒杀',
        type: true,
        num: '999',
        all: '999',
        today: '999',
        state: true
    }, {
        id: '6',
        name: '限时秒杀',
        type: true,
        num: '999',
        all: '999',
        today: '999',
        state: true
    }, {
        id: '7',
        name: '限时秒杀',
        type: true,
        num: '999',
        all: '999',
        today: '999',
        state: true
    }, {
        id: '8',
        name: '限时秒杀',
        type: true,
        num: '999',
        all: '999',
        today: '999',
        state: true
    },
]
</script>

<template>
    <div class="left">
        <div class="left-top">
            <div class="left-top-header">
                <div class="left-top-header-l">
                    <div class="left-top-header-l-img"></div>
                    <div class="left-top-header-l-text">
                        <div class="left-top-header-l-text-top">
                            <p>本期活动GMX</p>
                            <p style="font-size: 20px; font-weight: bolder;">1523.52w</p>
                        </div>
                        <div class="left-top-header-l-text-bottom">
                            <div>
                                <div>类目一</div>
                                <div>53W</div>
                            </div>
                            <div>
                                <div>类目二</div>
                                <div>53W</div>
                            </div>
                            <div>
                                <div>类目三</div>
                                <div>53W</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left-top-header-r">
                    <div class="left-top-header-r-l">
                        <div class="left-top-header-r-l-top">
                            <div class="left-top-header-r-l-top-img"></div>
                            <div class="left-top-header-r-l-top-text">
                                <div style="line-height: 30px;">
                                    <div style="font-size: 18px;">
                                        934.7w<span style="color: darkseagreen; font-size: 12px;">29.73</span>
                                    </div>
                                    <div style="color: #ccc;">今日DAU</div>
                                </div>
                            </div>
                        </div>
                        <div class="left-top-header-r-l-foot">
                            <div>
                                <p style="font-size: 20px; font-weight: bolder;">24.93w</p>
                                <p style="font-size: 12px; color: #ccc;">今日DAU</p>
                            </div>
                            <div>
                                <p style="font-size: 20px; font-weight: bolder;">984.52w</p>
                                <p style="font-size: 12px; color: #ccc;">总用户数</p>
                            </div>
                        </div>
                    </div>
                    <div class="left-top-header-r-r">
                        <div class="left-top-header-r-r-top">
                            <div class="left-top-header-r-r-top-img"></div>
                            <div class="left-top-header-r-r-top-text">
                                <div style="line-height: 30px;">
                                    <div style="font-size: 18px;">
                                        934.7w<span style="color: darkseagreen; font-size: 12px;">29.73</span>
                                    </div>
                                    <div style="color: #ccc;">今日DAU</div>
                                </div>
                            </div>
                        </div>
                        <div class="left-top-header-r-r-foot">
                            <div>
                                <p style="font-size: 20px; font-weight: bolder;">84.52w</p>
                                <p style="font-size: 12px; color: #ccc;">GPS</p>
                            </div>
                            <div>
                                <p style="font-size: 20px; font-weight: bolder;">84.52w</p>
                                <p style="font-size: 12px; color: #ccc;">特权</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-top-foot">
                <div class="left-top-foot-leacharts">
                    <LEacharts />
                </div>
                <div class="left-top-foot-reacharts">
                    <REacharts />
                </div>
            </div>
        </div>
        <div class="left-bottom">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="名称" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="主题页id" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.id }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="类型" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px" v-if="scope.row.type">内部链接</span>
                            <span style="margin-left: 10px" v-else>外部链接</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="商品数" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.num }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="总订单数" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.all }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="今日GMV" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px">{{ scope.row.today }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span style="margin-left: 10px" v-if="scope.row.state">已上线</span>
                            <span style="margin-left: 10px" v-else>已下线</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div class="right">
        <div class="right-top">
            <h3 style="padding: 1rem;">待处理</h3>
            <div>
                <div>退款申请</div>
                <div><span style="color: rgb(33, 81, 209);">89</span>条</div>
            </div>
            <div>
                <div>退款申请</div>
                <div><span style="color: rgb(33, 81, 209);">89</span>条</div>
            </div>
            <div>
                <div>退款申请</div>
                <div><span style="color: rgb(33, 81, 209);">89</span>条</div>
            </div>
            <div>
                <div>退款申请</div>
                <div><span style="color: rgb(33, 81, 209);">89</span>条</div>
            </div>
        </div>
        <div class="right-main">
            <h3 style="padding: 1rem; height: 2rem;">常用功能</h3>
            <div>
                <div class="right-main-icon">
                    <el-icon size="20">
                        <Histogram />
                    </el-icon>
                </div>
                <div class="right-main-text">
                    订单列表
                </div>
            </div>
            <div>
                <div class="right-main-icon">
                    <el-icon size="20">
                        <Avatar />
                    </el-icon>
                </div>
                <div class="right-main-text">
                    用户列表
                </div>
            </div>
            <div>
                <div class="right-main-icon">
                    <el-icon size="20">
                        <HomeFilled />
                    </el-icon>
                </div>
                <div class="right-main-text">
                    首页配置
                </div>
            </div>
            <div>
                <div class="right-main-icon">
                    <el-icon size="20">
                        <PictureFilled />
                    </el-icon>
                </div>
                <div class="right-main-text">
                    主题配置
                </div>
            </div>
            <div>
                <div class="right-main-icon">
                    <el-icon size="20">
                        <Menu />
                    </el-icon>
                </div>
                <div class="right-main-text">
                    活动管理
                </div>
            </div>
            <div>
                <div class="right-main-icon">
                    <el-icon size="20">
                        <Tools />
                    </el-icon>
                </div>
                <div class="right-main-text">
                    退款申请
                </div>
            </div>
        </div>
        <div class="right-img">
            <img src="../../assets/homebg.jpeg" alt="">
        </div>
        <div class="right-foot">
            <h3 style="padding: 1rem; height: 2rem;">公告栏</h3>
            <p>
                <el-tag type="danger">通知</el-tag><span>啊啊啊啊啊啊啊</span>
            </p>
            <p>
                <el-tag type="danger">通知</el-tag><span>总归还是会疯掉的</span>
            </p>
            <p>
                <el-tag type="danger">通知</el-tag><span>我想念你说过的那些永远</span>
            </p>
            <p>
                <el-tag type="danger">通知</el-tag><span>离我有多远</span>
            </p>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left {
    width: 69%;
    height: 100%;
    float: left;

    &-top {
        width: 100%;
        height: 50%;

        &-header {
            width: 100%;
            height: 45%;
            margin-top: 1%;

            &-l {
                width: 49%;
                height: 100%;
                float: left;
                margin-right: 1%;
                border-radius: 15px;
                background: rgb(59, 104, 246);

                &-img {
                    width: 40%;
                    height: 100%;
                    background: url('../../assets/home.png') no-repeat center center;
                    background-size: 100% 100%;
                    float: left;
                }

                &-text {
                    width: 58%;
                    height: 100%;
                    float: left;

                    &-top {
                        width: 100%;
                        height: 50%;
                        line-height: 20px;
                        border-bottom: 1px solid #fff;
                        color: #fff;
                    }

                    &-bottom {
                        width: 100%;
                        height: 50%;
                        display: flex;

                        >div {
                            flex: 1;
                            line-height: 30px;
                            font-size: 16px;
                            color: white;
                        }
                    }
                }
            }

            &-r {
                width: 50%;
                height: 100%;
                float: left;
                border-radius: 15px;

                &-l {
                    width: 49%;
                    height: 100%;
                    float: left;
                    margin-right: 1%;
                    border-radius: 15px;
                    background: white;

                    &-top {
                        width: 100%;
                        height: 50%;

                        &-img {
                            width: 40%;
                            height: 100%;
                            float: left;
                            background: url('../../assets/icon1.png') no-repeat center center;

                        }
                    }

                    &-foot {
                        width: 100%;
                        height: 50%;
                        display: flex;

                        >div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                }

                &-r {
                    width: 50%;
                    height: 100%;
                    float: left;
                    border-radius: 15px;
                    background: white;

                    &-top {
                        width: 100%;
                        height: 50%;

                        &-img {
                            width: 40%;
                            height: 100%;
                            float: left;
                            background: url('../../assets/icon2.png') no-repeat center center;

                        }
                    }

                    &-foot {
                        width: 100%;
                        height: 50%;
                        display: flex;

                        >div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                }
            }
        }

        &-foot {
            width: 100%;
            height: 53%;
            margin-top: 1%;

            &-leacharts {
                width: 49%;
                height: 100%;
                float: left;
                background: white;
            }

            &-reacharts {
                width: 50%;
                height: 100%;
                float: left;
                margin-left: 1%;
                background: white;
            }
        }
    }

    &-bottom {
        width: 100%;
        height: 49%;
        margin-top: 1%;


    }
}

.right {
    width: 30%;
    height: 100%;
    float: left;
    margin-left: 1%;

    &-top {
        width: 100%;
        height: 24%;
        margin-top: 1%;
        border-radius: 10px;
        background: white;
        >div {
            width: 40%;
            height: 20%;
            float: left;
            margin: 2% 2% 2% 4%;
            background: #fafafc;
            border-radius: 10px;
            padding-left: 10px;
            color: #8a8c90;
        }
    }

    &-main {
        width: 100%;
        height: 24%;
        margin-top: 1%;
        background: white;

        >div {
            width: 40%;
            height: 20%;
            float: left;
            margin: 1% 2% 2% 4%;
            background: #fafafc;
            border-radius: 10px;
            padding-left: 10px;
            color: #8a8c90;
        }

        &-icon {
            width: 20px;
            height: 80%;
            float: left;
            margin-top: 4%;
        }

        &-text {
            width: 80%;
            height: 100%;
            float: left;
            padding-left: 4px;
            line-height: 30px;
        }
    }

    &-img {
        width: 100%;
        height: 24%;
        margin-top: 1%;

        >img {
            width: 100%;
            height: 100%;
        }
    }

    &-foot {
        width: 100%;
        height: 24%;
        margin-top: 1%;
        background: white;

        >p {
            margin-top: 1%;
            margin-left: 2%;
            line-height: 25px
        }
    }
}
</style>